.nft-detail-container {
    padding: 1rem;
    min-height: 100vh;
    box-sizing: border-box;
    background: url("../images/home_bg.png");
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-color: #dafdda;

    .nft-detail-inner {
        height: calc(100vh - 9rem);
        border-radius: 2.4rem;
        overflow-y: auto;
        background-color: #fff;
        box-shadow: 0 0.2rem 0.6rem 0 #895bc9;

        .banner-box {
            aspect-ratio: 1 / 1;
            border-radius: 2.4rem 2.4rem 0 0;
            overflow: hidden;
            background: radial-gradient(circle at center, #7A59A9, #571BAD);

            img {
                width: 100%;
                height: 100%;
            }
        }

        .price-datetime {
            @include flex-start-between();
            padding: 1rem;

            .left-box {
                .lowest {
                    font-size: 1.4rem;
                    color: $purpleFontGray;
                }

                .current {
                    @include flex-center-start();

                    img {
                        width: 2.4rem;
                        height: 2.4rem;
                    }

                    .price {
                        padding-left: .4rem;
                        font-size: 3rem;
                        font-weight: bold;
                        color: $redFont;
                    }
                }
            }

            .right-box {
                text-align: right;

                .attr-name {
                    font-size: 1.4rem;
                    color: $purpleFontGray;
                }

                .attr-value {
                    font-size: 1.6rem;
                    font-weight: bold;
                    color: #000;
                }
            }
        }

        .detail-content-box {
            margin: 1rem;
            padding: 1.2rem;
            border-radius: 2.4rem;
            background-color: $purpleBgTwo;
            position: relative;

            .star-box {
                position: absolute;
                right: 1rem;
                top: 1rem;

                .MuiSvgIcon-root {
                    font-size: 3rem;
                    color: $purpleFontFive;
                }
            }

            .seller-info {
                @include flex-center-start();

                .user-photo {
                    width: 3rem;
                    height: 3rem;
                    border-radius: 50%;
                    overflow: hidden;
                    background-color: $purpleBgThree;

                    img {
                        width: 100%;
                        height: 100%;
                    }
                }

                .name {
                    padding-left: .4rem;
                    font-size: 1.6rem;
                    color: #000;
                }
            }

            .intraduce {
                margin-top: 1rem;

                .title {
                    font-size: 2rem;
                    font-weight: bold;
                    color: $purpleFontFive;
                }

                .content {
                    padding: .4rem 0;
                    font-size: 1.2rem;
                    line-height: 2rem;
                    color: $grayThree;
                }
            }

            .history-list-box {
                margin-top: 3rem;

                .title {
                    font-size: 1.6rem;
                    font-weight: bold;
                    color: #000;
                }

                .average-price {
                    @include flex-center-start();

                    .label-name {
                        margin-right: 1rem;
                        font-size: 1.2rem;
                        color: $grayTwo;
                    }

                    img {
                        width: 2rem;
                        height: 2rem;
                    }

                    .price {
                        padding-left: .2rem;
                        font-size: 1.8rem;
                        font-weight: bold;
                    }
                }

                .list-box {
                    .item-box {
                        margin-top: .6rem;
                        padding: .8rem 1rem;
                        border-radius: 1rem;
                        background-color: $purpleBgThree;

                        .seller-seller {
                            @include flex-center-start();

                            .user-info {
                                @include flex-center-start();
                            }

                            .MuiSvgIcon-root {
                                margin: 0 1rem;
                                color: $purpleFontTwo;
                            }

                            .user-photo {
                                width: 2rem;
                                height: 2rem;
                                border-radius: 50%;
                                overflow: hidden;
                                background-color: $purpleBgThree;

                                img {
                                    width: 100%;
                                    height: 100%;
                                }
                            }

                            .name {
                                padding-left: .2rem;
                                font-size: 1.2rem;
                                font-weight: bold;
                            }
                        }

                        .datetime-price {
                            @include flex-center-between();
                            margin-top: .2rem;

                            .datetime {
                                font-size: 1rem;
                                color: $purpleFont;
                            }

                            .price-box {
                                .attr {
                                    font-size: 1rem;
                                    color: $purpleFont;
                                }

                                .price {
                                    margin-left: .4rem;
                                    font-size: 1.2rem;
                                    font-weight: bold;
                                    color: $purpleFontFive;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}